<template>
	<div id="settlement">   
		<div class="scroll_main o_h"> <!-- :class="unTotal ? '' : 'hidePullup'" -->
		<!-- <el-button class="" type="warning" icon="el-icon-download" @click="handleExport">导出</el-button> -->
		<el-button class="" type="warning" icon="el-icon-check" @click="handleUpdate" :disabled="id.length == 0">网单批量结算</el-button>
			<scroll class="main"
				ref="scroll"
				:data="list"
				:top="0"
				:bottom="40"
				@onScroll="onScroll"
				@pullingUp="unTotal && onScrollBottom()"
				@pullingDown="onPullingDown"
				style="position: relative;"
			>
			<!-- <div class="main"> -->
				<div class="cell dis_f pos_rel" v-for="(item,index) in list">
					<div class="wa">
						<div class="dis_f" style="font-size: .4rem;">
							<div class="tac fwb coo_bg" style="height: .56rem;line-height: .56rem;padding: 0 .16rem; border-radius: .56rem;color: #fff;margin-right: 0.2rem;">{{(index+1)}}</div>
							<div class="" style="line-height: 0.56rem;">{{item.carNumber}}</div>
						</div>

						<div class="item">订单编号：{{item.carOrder.id}}</div>
						<div class="item">日期：{{item.createTime}}</div>
						<div class="item">门店：{{item.carOrder.shop.shopName || '--'}}</div>
						<div class="">租车人：{{item.carOrder.customer.customerName || '--'}}</div>
						<div class="item" :class="item.carOrder.startTime ? '' : 'col_5'">发车时间：{{item.carOrder.startTime || '--'}}</div>
						<div class="item" :class="item.carOrder.endTime ? '' : 'col_5'">还车时间：{{item.carOrder.endTime || '--'}}</div>
						<div class="item dis_f">
							<div class="">客户来源：</div>
							<div class="" :class="item.carOrder.customerResourceType ? 'col_3' : 'col_1'">{{item.carOrder.customerResourceType ? '线上' : '线下'}}</div>
						</div>
						<div class="item">租金标准：{{item.carOrder.rentStandard || '--'}} 元/天</div>
						<div class="item">租期：{{item.carOrder.rentDay || '--'}} 天</div>
						<div class="item">收租车押金：{{item.rentDepositIn || 0}} 元</div>
						<div class="item">收违章押金：{{item.breakRuleDepositIn || 0}} 元</div>
						<div class="item">退租车押金：{{item.rentDepositOut || 0}} 元</div>
						<div class="item">退违章押金：{{item.breakRuleDepositOut || 0}} 元</div>
						<div class="item">车辆支出：{{item.carOut || 0}} 元</div>
						<div class="item">车辆额外收入：{{item.carIn || 0}} 元</div>
						<div class="item">网单已结：{{item.onlineRealIn || 0}} 元</div>
						<div class="item">网单已结：{{item.onlineMustIn || 0}} 元</div>
						<div class="item">线下下单实收租金：{{item.rentPriceIn || 0}} 元</div>
						<div class="item">车辆收入余额：{{item.carLastIn || 0}} 元</div>
						<div class="item">业务员提成：{{item.agentPriceOut || 0}} </div>
						<div class="item">车主收入：{{item.carOwnerIn || 0}} 元</div>
						<div class="item">公司收入：{{item.companyIn || 0}} 元</div>
						<div class="item">车主支出：{{item.carOwnerOut || 0}} 元</div>
						<div class="item">车主额外收入：{{item.carOwnerExtraIn || 0}} 元</div>
						<div class="item">车主结算金额：{{item.carOwner || 0}} 元</div>
						<div class="item">客户欠款：{{item.debt || 0}} 元</div>
						<div class="item" :class="item.remark ? '' : 'col_5'">备注：{{item.remark || '暂无备注'}}</div>
					</div> 
					<!-- 单选 -->
					<div class="hook_box" @click.stop="checked(item.carOrder.id,index,item.isChecked)">
						<img class="hook" v-if="item.isChecked" src="@/assets/images/hook.png" alt="">
					</div> 
				</div>

				<div class="no_data wa" v-if="noData">
					<img src="@/assets/images/no_data.png" alt="">
					<div class="text wa tac">没有数据</div>
				</div>
				<!-- <div class="pullup_end" v-if="!unTotal && !noData">{{ state.noDataText }}</div> -->
				<div class="cell" v-if="list.length !== 0">
					<div class="dis_f fwb col_3" style="font-size: .4rem;">合计</div>
					<div class="item">租车押金：{{total.rentDepositIn}} 元</div>
					<div class="item">违章押金：{{total.breakRuleDepositIn}} 元</div>
					<div class="item">车辆支出：{{total.carOut}} 元</div>
					<div class="item">车辆额外收入：{{total.carIn}} 元</div>
					<div class="item">网单已结：{{total.onlineRealIn}} 元</div>
					<div class="item">线下下单收入：{{total.offlineIn}} 元</div>
					<div class="item">车辆收入余额：{{total.carLastIn}} 元</div>
					<div class="item">车主收入：{{total.carOwnerIn}} 元</div>
					<div class="item">公司收入：{{total.companyIn}} 元</div>
				</div>
			</scroll>
			<!-- </div> -->
		</div>
	</div>
</template>
<script>
import Scroll from 'vue-scroll-m';
import baseURL from '@/utils/url';
import { listCarOrderFinance, updateCarOrderFinance} from "@/api/financeDetail";
import store from "@/store/store"
export default {
	name: 'topHead',
	components: { Scroll },
	data(){
		return {
			listTotal:0,
			unTotal: false,
			noData: false,
			state: store.state,
			setParams: {
				pageNum: 1,
				pageSize: 10,
			},
			id:[],
			list: [],
			total: {
				rentDepositIn: 0,
				breakRuleDepositIn: 0,
				carOut: 0,
				carIn: 0,
				onlineRealIn: 0,
				offlineIn: 0,
				carLastIn: 0,
				carOwnerIn: 0,
				companyIn: 0
			}
		}
	},
	mounted(){
	// 	this.getList();
	},
	methods: {
		checked(id,index,isChecked){
			if(isChecked){
				this.id = this.id.filter((item) => { return item != id });
				this.list[index].isChecked = false;
			}else{
				this.id.push(id);
				this.list[index].isChecked = true;
			}
		},
		/** 网单批量结算 */
		handleUpdate() {
			const id = this.id;
			this.$confirm('是否对所选网单进行批量结算？请谨慎操作！', '确认信息', {
					distinguishCancelAndClose: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'mini-confirm'
				}).then(() => {
			console.log(id)
					updateCarOrderFinance(id).then( res => {
						if(res.code === 200){
							this.$message({
								type: 'success',
								message: '结算成功'
							});
						}
					})
				}).catch(action => {});
		},

		/** 查询财务明细列表 */
		getList() {
			this.loading = this.$loading({
				lock: true,
				text: "加载中",
				background: "rgba(0, 0, 0, 0.7)",
			});
			listCarOrderFinance(this.setParams).then(res => {
				// console.log("list",res)
				if(res.code == 200){
					let list = res.rows;
					let images = [];
					this.listTotal = res.total;
					let rentDepositIn = 0;
					let breakRuleDepositIn = 0;
					let carOut = 0;
					let carIn = 0;
					let onlineRealIn = 0;
					let offlineIn = 0;
					let carLastIn = 0;
					let carOwnerIn = 0;
					let companyIn = 0;
					if(res.total !== 0){
						list.forEach((item,index) => {
							if(item.carOrder == null){
								item.carOrder = { customer : { customerName : '' },shop : { shopName : '' } };
							}else{
								if(item.carOrder.customer == null){
									item.carOrder.customer = { customerName : '' };
								}
								if(item.carOrder.shop == null){
									item.carOrder.shop = { shopName : '' };
								}
							}

							rentDepositIn += item.rentDepositIn || 0;
							breakRuleDepositIn += item.breakRuleDepositIn || 0;
							carOut += item.carOut || 0;
							carIn += item.carIn || 0;
							onlineRealIn += item.onlineRealIn || 0;
							offlineIn += item.offlineIn || 0;
							carLastIn += item.carLastIn || 0;
							carOwnerIn += item.carOwnerIn || 0;
							companyIn += item.companyIn || 0;
							if(item.carImg){
								images = item.carImg.split(",");
							}
							item.images = images || null;
							if(index === list.length - 1){
								if(this.setParams.pageNum !== 1){
									this.list = this.list.concat(list);
									if(this.list.length === this.listTotal){
										this.unTotal = false;
									}
								}else{
									this.list = list;
								}
								// 阻断下拉加载
								if(this.list.length < 10){
									this.unTotal = false;
								}
								this.total.rentDepositIn = Math.round(rentDepositIn.toFixed(2) * 100) / 100;
								this.total.breakRuleDepositIn = Math.round(breakRuleDepositIn.toFixed(2) * 100) / 100;
								this.total.carOut = Math.round(carOut.toFixed(2) * 100) / 100;
								this.total.carIn = Math.round(carIn.toFixed(2) * 100) / 100;
								this.total.onlineRealIn = Math.round(onlineRealIn.toFixed(2) * 100) / 100;
								this.total.offlineIn = Math.round(offlineIn.toFixed(2) * 100) / 100;
								this.total.carLastIn = Math.round(carLastIn.toFixed(2) * 100) / 100;
								this.total.carOwnerIn = Math.round(carOwnerIn.toFixed(2) * 100) / 100;
								this.total.companyIn = Math.round(companyIn.toFixed(2) * 100) / 100;
							}
						})
					}else{
						this.unTotal = false;
						this.noData = true;
					}
				}
				this.loading.close();
			});
		},
		
		// 下拉加载
		onScroll(e) {
			// console.log(e.target.scrollTop)
		},
		// 顶部下拉到头（刷新）
		onPullingDown() {
			this.setParams.pageNum = 1;
			this.unTotal = true;
			this.getList();
		},
		// 下拉松手 (加载)
		onScrollBottom(e) {
			if(this.list.length < this.listTotal ){
				this.setParams.pageNum++;
				this.getList();
			}
		},
		goTop() {
			this.$refs.scroll.scrollTo(0, 0);
		}
	},
	watch: {
		setParams(n,o){ //n为新值,o为旧值;
			this.unTotal = true;
			this.noData = false;
			this.list = [];
			this.getList();
		}
	}
}
</script>
<style scoped lang="scss">
	@import '@/assets/css/currency.css';
		#settlement{
		height: 100%;

		.scroll_main{
			height: calc( 100% - .4rem);

			.item{
				margin: .1rem 0;
			}
		}
		/deep/ .scroll-content{
			padding-bottom: 6rem;
		}
		.hidePullup /deep/ .pullup {
			display: none;
		}
		.down{
			margin-top:10rem;
		}
	}
</style>